<template>
	<layout>
		<!-- 温馨提醒区域 -->
		<warm></warm>
		<view class="main-content">
			<!-- 左侧内容区域 -->
			<view class="left-content">
				<!-- 轮播图区域 -->
				<carousel></carousel>
				<!-- 主要功能区 -->
				<view class="main">
					<fun-card title="墓位查询" desc="快速定位 便捷寻访" icon="/static/images/mwcx.png" @cardClick="handleSearch"></fun-card>
					<fun-card title="管理费续缴" desc="在线缴费 安心托管" icon="/static/images/glfxj.png" @cardClick="handleManageFee"></fun-card>
					<fun-card title="发票打印" desc="在线打印 便捷高效" icon="/static/images/fpdy.png" @cardClick="handlePrint"></fun-card>
				</view>
			</view>

			<!-- 右侧内容区域 -->
			<view class="right-content">
				<!-- 公告区域 -->
				<view class="notices">
					<view class="notice-header">
						<view class="notice-title-wrapper">
							<view class="notice-title">墓园公告</view>
							<view class="notice-subtitle">Cemetery Announcements</view>
						</view>
						<view class="refresh-indicator" :class="{ refreshing: isRefreshing }">
							<view class="refresh-circle"></view>
							<text class="refresh-time">{{ remaining }}s</text>
						</view>
					</view>
					<scroll-view class="notice-content" scroll-y>
						<view class="notice-item" v-for="(item, index) in messageList" :key="index" :style="{ animationDelay: index * 0.1 + 's' }" :class="{ 'refresh-animate': isRefreshing }">
							<view class="notice-tag" :class="item.xxlxKey">
								<view class="tag-dot"></view>
								{{ item.xxlx }}
							</view>
							<view class="notice-main">
								<text class="notice-text">{{ item.xxbt }}</text>
								<text class="notice-date">{{ getTime(item.createdTime) }}</text>
							</view>
						</view>
					</scroll-view>
				</view>

				<!-- 底部信息 -->
				<view class="footer">
					<view class="footer-content">
						<view class="contact">
							<view class="contact-title">
								<view class="title-text">联系我们</view>
								<view class="title-en">Contact Us</view>
							</view>
							<view class="contact-info">
								<view class="info-row" v-for="(item, index) in contactInfo" :key="index">
									<uni-icons type="phone" size="12" color="#6c8eaf"></uni-icons>
									<view class="info-text">{{ item }}</view>
								</view>
							</view>
						</view>

						<view class="divider"></view>

						<view class="qrcode">
							<image class="qrcode-img" src="/static/images/jnl-xcx.jpg"></image>
							<text class="qrcode-text">扫码关注小程序</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="version-number">
			<version-number :version="version" @checkUpdate="handleCheckUpdate"></version-number>
		</view>
		<update ref="updateRef" @hasNewVersion="handleHasNewVersion" @noNewVersion="handleNoNewVersion"></update>
		<popup ref="popupPrint" title="打印服务中心" :showFooter="false" :maskClick="true">
			<print-menu @selectMenu="handleSelectMenu"></print-menu>
		</popup>
	</layout>
</template>

<script setup>
	// 标题
	const title = ref('');

	// 公告列表
	const messageList = ref([]);

	// 是否刷新
	const isRefreshing = ref(false);

	// 倒计时
	const countdown = ref(120);

	// 联系方式
	const contactInfo = ref([]);

	// 更新
	const updateRef = ref();

	// 版本
	const version = ref('');

	// 发票打印
	const popupPrint = ref(null);

	// 墓位查询
	const handleSearch = () => {
		uni.navigateTo({ url: '/pages/cemetery/query/index' });
	};

	// 管理费续交
	const handleManageFee = () => {
		uni.navigateTo({ url: '/pages/cemetery/manage/index' });
	};

	/**
	 * 发票打印
	 */
	const handlePrint = () => {
		popupPrint.value.open();
	};

	/**
	 * 获取时间
	 * @param {*} time
	 * @returns
	 */
	const getTime = (time) => {
		return UTILUseTimeAgo(time);
	};

	/**
	 * 检查更新
	 */
	const handleCheckUpdate = () => {
		updateRef.value.checkUpdate();
	};

	/**
	 * 有新版本
	 */
	const handleHasNewVersion = (res) => {
		version.value = res.version;
	};

	/**
	 * 没有新版本
	 */
	const handleNoNewVersion = (res) => {
		console.log('🚀 ~ handleNoNewVersion ~ res:', res);
	};

	/**
	 * 选择菜单
	 */
	const handleSelectMenu = ({ link, id }) => {
		console.log('🚀 ~ handleSelectMenu ~ type:', link);
		console.log('🚀 ~ handleSelectMenu ~ id:', id);
		popupPrint.value.close();
		uni.navigateTo({ url: '/pages/print/index?type=' + link + '&id=' + id });
	};

	/**
	 * 倒计时
	 */
	const { remaining, start, stop } = useCountdown(countdown.value, {
		controls: true,
		onComplete: () => {
			refreshData();
			start();
		},
	});

	// 刷新数据
	const refreshData = () => {
		isRefreshing.value = true;
		// 刷新数据
		getMsgList();
		setTimeout(() => {
			isRefreshing.value = false;
		}, 1000);
	};

	// 获取轮播图
	const getBannerList = async () => {
		const { code, rows } = await ApiGetCompanyBanner({
			xslxKey: 'xs',
			tplxKey: 'zzj',
			gsbm: useCompanyStore().GetCurCompanyInfo().bm,
		});
		if (code === 200) {
			useCompanyStore().setBannerList(rows);
		}
	};

	// 获取公告信息
	const getMsgList = async () => {
		const { code, rows } = await ApiGetCompanyMsg({
			fbbm: useCompanyStore().GetCurCompanyInfo().bm,
			pageNum: 1,
			pageSize: 3,
		});

		if (code === 200) {
			messageList.value = rows;
		}
	};

	onLoad(() => {
		// 获取公司信息
		ApiGetCompanyData(useRuntimeConfig().companyType).then(({ code, data }) => {
			console.log('data', data);
			// 保存公司信息
			useCompanyStore().setCurCompanyInfo(data);

			// 设置联系方式
			if (data.lxdh) contactInfo.value = data.lxdh.split(',');

			// 获取banner和消息列表
			getBannerList();
			getMsgList();
		});
	});

	onMounted(() => {
		start(); // 开始倒计时

		// 获取banner列表
		const list = useCompanyStore().GetBannerList();
		// 如果列表存在且长度大于0
		if (list && list.length) {
			// 遍历列表
			list.forEach((element) => {
				// 设置图片地址
				element.url = useRuntimeConfig().target.UPLOADURL + element.refId;
			});
		}
	});

	onUnmounted(() => {
		stop(); // 停止倒计时
	});
</script>

<style lang="scss" scoped>
	.version-number {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.main-content {
		display: flex;
		gap: 15px;
		height: calc(100% - 120px);
		margin-bottom: 14px;
		background: linear-gradient(135deg, #f5f7fa 0%, #e9eef2 100%);
		border-radius: 20px;
		padding: 15px;
		box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.05);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: radial-gradient(circle at 10% 10%, rgba(108, 142, 175, 0.03) 0%, transparent 60%), radial-gradient(circle at 90% 90%, rgba(108, 142, 175, 0.03) 0%, transparent 60%);
			pointer-events: none;
		}

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%236c8eaf" stroke-width="0.2" stroke-opacity="0.05"/></svg>');
			background-size: 10px 10px;
			opacity: 0.5;
			pointer-events: none;
		}
	}

	:deep(.uni-icons) {
		font-size: 12px !important;
	}

	// 左侧区域
	.left-content {
		flex: 1.2;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		backdrop-filter: blur(5px);
		border-radius: 15px;
		padding: 5px;
		background: rgba(255, 255, 255, 0.2);
		border: 1px solid rgba(255, 255, 255, 0.5);
	}

	// 右侧区域
	.right-content {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		backdrop-filter: blur(5px);
		border-radius: 15px;
		padding: 5px;
		background: rgba(255, 255, 255, 0.2);
		border: 1px solid rgba(255, 255, 255, 0.5);
	}

	// 主要功能区
	.main {
		display: flex;
		justify-content: space-between;
		width: 100%;
		flex: 1;
		gap: 20px;
		padding-bottom: 0;
	}

	// 公告区域
	.notices {
		flex: 1;
		width: 100%;
		background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
		border-radius: 15px;
		padding: 15px;
		margin-bottom: 15px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(10px);
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 120px;
			height: 120px;
			background: radial-gradient(circle, rgba(108, 142, 175, 0.05) 0%, transparent 70%);
			z-index: 0;
		}

		&::after {
			content: '';
			position: absolute;
			bottom: -30px;
			left: -30px;
			width: 100px;
			height: 100px;
			background: radial-gradient(circle, rgba(108, 142, 175, 0.05) 0%, transparent 70%);
			z-index: 0;
		}

		.notice-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12px;
			position: relative;
			z-index: 1;

			&::after {
				content: '';
				position: absolute;
				bottom: -6px;
				left: 0;
				width: 50px;
				height: 1px;
				background: linear-gradient(to right, #6c8eaf, transparent);
			}

			.notice-title-wrapper {
				position: relative;

				.notice-title {
					font-size: 18px;
					font-weight: 600;
					color: #2c3e50;
					letter-spacing: 1px;
					margin-bottom: 2px;
					display: flex;
					align-items: center;

					&::before {
						content: '';
						display: inline-block;
						width: 6px;
						height: 16px;
						background: linear-gradient(to bottom, #6c8eaf, rgba(108, 142, 175, 0.5));
						border-radius: 3px;
						margin-right: 8px;
					}
				}

				.notice-subtitle {
					font-size: 10px;
					color: #6c8eaf;
					letter-spacing: 2px;
					text-transform: uppercase;
					opacity: 0.8;
					margin-left: 14px;
				}
			}

			.refresh-indicator {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 32px;
				height: 32px;
				position: relative;
				cursor: pointer;
				transition: all 0.3s ease;
				background: rgba(255, 255, 255, 0.4);
				border-radius: 50%;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
				border: 1px solid rgba(255, 255, 255, 0.5);

				.refresh-circle {
					width: 20px;
					height: 20px;
					border: 2px solid rgba(108, 142, 175, 0.2);
					border-top-color: #6c8eaf;
					border-radius: 50%;
					transition: all 0.3s ease;
				}

				.refresh-time {
					position: absolute;
					font-size: 9px;
					color: #6c8eaf;
					font-weight: 500;
				}

				&.refreshing .refresh-circle {
					animation: spin 1s linear infinite;
				}

				&:hover {
					transform: scale(1.1);
					background: rgba(255, 255, 255, 0.6);
				}

				&:active {
					transform: scale(0.95);
				}
			}
		}

		.notice-content {
			flex: 1;
			overflow-y: auto;
			position: relative;
			z-index: 1;

			.notice-item {
				display: flex;
				padding: 10px;
				margin-bottom: 8px;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 8px;
				box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
				animation: fadeIn 0.5s ease forwards;
				opacity: 0;
				transform: translateY(10px);
				border: 1px solid rgba(255, 255, 255, 0.2);
				transition: all 0.3s ease;
				position: relative;
				overflow: hidden;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 2px;
					height: 100%;
					background: linear-gradient(to bottom, #6c8eaf, rgba(108, 142, 175, 0.3));
					opacity: 0;
					transition: all 0.3s ease;
				}

				&:hover {
					transform: translateY(-2px) translateX(3px);
					box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);

					&::before {
						opacity: 1;
					}
				}

				&.refresh-animate {
					animation: fadeInRefresh 0.5s ease forwards;
				}

				.notice-tag {
					padding: 2px 5px;
					border-radius: 5px;
					font-size: 11px;
					color: white;
					display: flex;
					align-items: center;
					margin-right: 10px;
					height: fit-content;
					background-color: #6c8eaf;
					letter-spacing: 1px;
					font-weight: 500;
					box-shadow: 0 2px 6px rgba(108, 142, 175, 0.2);
					transition: all 0.3s ease;

					&.tzgg {
						background-color: #5c8b93;
					}

					&.hydt {
						background-color: #8b7765;
					}

					&.zcfg {
						background-color: #7a6c87;
					}

					&:hover {
						transform: translateY(-1px);
						box-shadow: 0 3px 8px rgba(108, 142, 175, 0.3);
					}

					.tag-dot {
						width: 3px;
						height: 3px;
						border-radius: 50%;
						background-color: white;
						margin-right: 5px;
						box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
					}
				}

				.notice-main {
					flex: 1;
					display: flex;
					flex-direction: column;
					position: relative;

					.notice-text {
						font-size: 13px;
						color: #2c3e50;
						margin-bottom: 5px;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						line-height: 1.3;
						letter-spacing: 0.5px;
						position: relative;
						transition: all 0.3s ease;

						&:hover {
							color: #000;
						}
					}

					.notice-date {
						font-size: 11px;
						color: #888;
						align-self: flex-end;
						position: relative;
						padding-left: 14px;

						&::before {
							content: '';
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							width: 10px;
							height: 1px;
							background: linear-gradient(to right, #6c8eaf, transparent);
						}
					}
				}
			}
		}
	}

	// 底部信息
	.footer {
		width: 100%;
		height: 140px;
		background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
		border-radius: 15px;
		padding: 15px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(10px);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
		}

		.footer-content {
			display: flex;
			justify-content: space-between;
			height: 100%;
			position: relative;
			z-index: 2;

			.contact {
				flex: 1;
				display: flex;
				flex-direction: column;
				position: relative;

				.contact-title {
					margin-bottom: 10px;
					position: relative;
					display: flex;
					align-items: baseline;

					&::after {
						content: '';
						position: absolute;
						bottom: -6px;
						left: 0;
						width: 50px;
						height: 1px;
						background: linear-gradient(to right, #6c8eaf, transparent);
					}

					.title-text {
						font-size: 16px;
						font-weight: 600;
						color: #2c3e50;
						margin-right: 8px;
						letter-spacing: 1px;
						margin-bottom: 2px;
						display: flex;
						align-items: center;

						&::before {
							content: '';
							display: inline-block;
							width: 6px;
							height: 16px;
							background: linear-gradient(to bottom, #6c8eaf, rgba(108, 142, 175, 0.5));
							border-radius: 3px;
							margin-right: 8px;
						}
					}

					.title-en {
						font-size: 10px;
						color: #6c8eaf;
						letter-spacing: 2px;
						text-transform: uppercase;
						opacity: 0.8;
						margin-left: 14px;
					}
				}

				.contact-info {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin-top: 6px;
					gap: 10px;

					.info-row {
						display: flex;
						align-items: center;
						transition: all 0.3s ease;
						position: relative;

						&:hover {
							transform: translateX(3px);
						}

						&::before {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							width: 0%;
							height: 1px;
							background: linear-gradient(to right, rgba(108, 142, 175, 0.2), transparent);
							transition: all 0.3s ease;
						}

						&:hover::before {
							width: 100%;
						}

						.info-text {
							font-size: 12px;
							color: #555;
							margin-left: 5px;
							letter-spacing: 0.5px;
							transition: all 0.3s ease;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							&:hover {
								color: #2c3e50;
							}
						}
					}
				}
			}

			.divider {
				width: 1px;
				height: 80%;
				align-self: center;
				background: linear-gradient(to bottom, transparent, rgba(108, 142, 175, 0.3), transparent);
				margin: 0 15px;
				position: relative;

				&::before,
				&::after {
					content: '';
					position: absolute;
					left: 50%;
					width: 6px;
					height: 6px;
					border-radius: 50%;
					background: rgba(108, 142, 175, 0.2);
					transform: translateX(-50%);
				}

				&::before {
					top: 0;
				}

				&::after {
					bottom: 0;
				}
			}

			.qrcode {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					top: -5px;
					right: -5px;
					width: 25px;
					height: 25px;
					border-top: 1px solid rgba(108, 142, 175, 0.3);
					border-right: 1px solid rgba(108, 142, 175, 0.3);
					opacity: 0.6;
				}

				.qrcode-img {
					width: 70px;
					height: 70px;
					margin-bottom: 6px;
					border-radius: 6px;
					box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
					border: 3px solid white;
					transition: all 0.3s ease;
					position: relative;
					z-index: 1;

					&::after {
						content: '';
						position: absolute;
						top: -3px;
						left: -3px;
						right: -3px;
						bottom: -3px;
						border-radius: 9px;
						background: linear-gradient(135deg, rgba(108, 142, 175, 0.2), transparent);
						z-index: -1;
						opacity: 0;
						transition: all 0.3s ease;
					}

					&:hover {
						transform: scale(1.05) translateY(-3px);
						box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);

						&::after {
							opacity: 1;
						}
					}
				}

				.qrcode-text {
					font-size: 12px;
					color: #555;
					letter-spacing: 1px;
					position: relative;
					padding-bottom: 3px;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 0;
						height: 1px;
						background: linear-gradient(to right, transparent, #6c8eaf, transparent);
						transition: all 0.3s ease;
					}

					&:hover::after {
						width: 100%;
					}
				}
			}
		}
	}

	// 动画
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeInRefresh {
		0% {
			opacity: 0;
			transform: translateY(-10px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>
